没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|行业资讯|编辑:何家巧|2023-01-04 11:06:18.653|阅读 131 次
概述:本文将带来如何使用 LightningChart 创建 JavaScript 散点图,主要从2个方面讲解,一是LightningChart JS XY 图表的功能应用,二是讲解如何使用 LightningChart JS 创建嵌入式散点图并向其添加自定义交互功能。
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
相关链接:
LightningChart JS是一款高性能的JavaScript图标库,专注于实时数据可视化,以“快如闪电”享誉全球,是Microsoft Visual Studio数据展示速度最快的2D和3D图表制图组件,可实时呈现超过10亿数据点的海量数据。
本文将带来如何使用 LightningChart 创建 JavaScript 散点图,主要从2个方面讲解,一是LightningChart JS XY 图表的功能应用,二是讲解如何使用 LightningChart JS 创建嵌入式散点图并向其添加自定义交互功能。
这个图表将可视化一个XY坐标列表和一个自定义属性,这些自定义属性可以与UI文本元素一起显示,实现与用户的鼠标操作互动。
const chart = lightningChart().ChartXY()
const pointSeries = chart.addPointSeries()
pointSeries.add(new Array(100).fill(0).map(() => ({
x: Math.random(),
y: Math.random()
})))
将自定义属性附加到数据点
在为 Lightning Chart JS 提供数据时,我们采用了 JavaScript 对象的格式,它允许任意数量的键:值组合。在前面的代码片段中,我们看到了创建具有 X 和 Y 属性的 JavaScript 对象:
const point = { x: 0, y: 0 }
添加自定义数据点属性就像人们猜测的那样简单:在 x 和 y 之后添加它们:
const point = { x: 0, y: 0, custom: 'abcdefg' }
然后可以将这些自定义属性与数据游标、从鼠标位置求解数据点等一起使用。在本示例中,我们将它们与 UI 文本元素一起使用。
如何添加交互式 UI 文本元素?
此代码添加一个标签,将其放置在数据点旁边,并将其设置为显示数据“自定义”属性中的文本。
const label = chart.addUIElement(
UIElementBuilders.TextBox,
{ x: xAxis, y: yAxis }
)
label
.setPosition(point)
.setMargin({ bottom: 10 })
.setText(point.custom)
我们还可以在这里做一个小标识,这对我们以后的工作会有很大帮助。让我们为数据点添加另一个自定义属性--UI文本元素。
point.label = label
最后一步是跟随用户的鼠标移动并通过将其着色为纯白色来激活最近的数据点。当用户将鼠标移动到数据点时,颜色标签将变为白色
chart.onSeriesBackgroundMouseMove((_, event) => {
const nearestDataPoint = pointSeries.solveNearestFromScreen(chart.engine.clientLocation2Engine(event.clientX, event.clientY))
if (nearestDataPoint) {
label.setFillStyle(new SolidFill({ color: ColorRGBA(255, 255, 255) }))
}
})
结果这是嵌入图表的最终结果。单击嵌入式图表右上角的图标,可以在 GitHub 中找到完整的源代码。
欢迎加入LightningChart技术交流群,获取最新产品咨询:740060302
想了解Lightning Charts JS 购买/授权/试用下载,欢迎咨询慧都客服。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com
在当今快速发展的技术环境中,高效的建模与设计工具是确保项目成功的关键。Sparx Systems Enterprise Architect(Sparx EA)作为一款基于开放标准的可视化工具,为技术团队提供了从需求分析到最终交付的全流程支持。本文将深入探讨其三大核心功能——分析工具、调度工具和可追溯性,并展示它们如何帮助团队实现无缝衔接的工作流。
自动化测试工具TestComplete能够录制测试过程的完整视频,并自动标记关键事件,测试人员可以直观地观察用户操作与系统响应,快速定位问题根源。结合图像捕获功能,还能同步记录界面元素的属性,确保动态变化和UI状态的精准验证。
随着电动化和智能化的发展,汽车已成为高度依赖软件运行的复杂系统,网络安全风险也随之激增。本文从ECU架构入手,结合多起真实攻击案例,解析现代汽车面临的主要威胁,并探讨ISO 21434等安全标准如何指导软件测试和验证,帮助厂商构建更具韧性的车辆系统。
本文将基于2025版的最新更新,从格式支持、平台适配和技术亮点三方面进行系统解析,助力3D开发伙伴进行选型与实施参考。
高性能的JavaScript图表库,专注于实时数据可视化。
LightningChart® .NET高性能WPF和Winforms图表,可以实时可视化多达1万亿个数据点。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@evget.com
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
慧都科技 版权所有 Copyright 2003-
2025 渝ICP备12000582号-13 渝公网安备
50010702500608号